<template>
  <div class="all">
    <el-container>
      <el-header>
        <div>
          <p class="title">
            <span class="ch">车位淘</span>
            <span>CHEWEITAO</span>
          </p>
          <div class="header-tail">
            <el-select
              v-model="local_current_property_area"
              placeholder=""
              @change="aleart_change_current_property"
            >
              <el-option
                v-for="item in propertys"
                :key="item.area"
                :label="item.area"
                :value="item.area"
              >
              </el-option>
            </el-select>
            <div
              @click="showQuitChangeBtn = !showQuitChangeBtn"
              class="header-image"
            >
              <img
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </div>
          </div>
        </div>
      </el-header>
      <el-main class="maincontent">
        <el-container>
          <el-aside width="15vw">
            <el-menu
              @select = 'select'
              default-active="0"
              @open="handleOpen"
              @close="handleClose"
              router=""
            >
              <el-menu-item >首页</el-menu-item>

              <el-submenu index="10">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>活动管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="promote">促销活动</el-menu-item>
                  <el-menu-item index="coupon-show">优惠券管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="11">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>车位发布</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="parking-space-manager"
                    >车位信息</el-menu-item
                  >
                  <el-menu-item index="parking-space-design"
                    >车位规划图</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>

              <el-menu-item index="household-show">
                <i class="el-icon-s-check"></i>
                <span slot="title">业主维护</span>
              </el-menu-item>

              <el-submenu index="18">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span slot="title">销控管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="order-show">历史订单</el-menu-item>
                  <el-menu-item index="sale-show">上架车位</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="12">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>基本信息</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="updateInfo">信息完善</el-menu-item>
                  <el-menu-item index="changePwd">修改密码</el-menu-item>
                
                </el-menu-item-group>
              </el-submenu>

              <el-menu-item>
                <i class="el-icon-house"></i>
                <span>当前房产</span> 
              </el-menu-item
              >
            </el-menu>
          </el-aside>
          <el-main>
            <el-collapse-transition>
              <div class="dropdown" v-if="showQuitChangeBtn">
                <div @click="quit">退出登录</div>
                <div @click="showChangePwd = true">修改密码</div>
              </div>
            </el-collapse-transition>

            <el-dialog
              title="修改密码"
              :visible.sync="showChangePwd"
              width="30%"
              :before-close="handleClose"
            >
              <el-form
                ref="form"
                :model="pwdForm"
                label-width="80px"
                class="changepwd-form"
              >
                <el-form-item label="旧密码">
                  <el-input v-model="pwdForm.oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input v-model="pwdForm.newPwd1"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input v-model="pwdForm.newPwd2"></el-input>
                </el-form-item>
                <el-form-item class="form-btn">
                  <el-button-group>
                    <el-button type="primary" @click="changePwd"
                      >确定</el-button
                    >
                    <el-button @click="showChangePwd = false">取消</el-button>
                  </el-button-group>
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-button
              type="primary"
              circle
              icon="el-icon-caret-left"
              @click="changeSlide"
            ></el-button>
            <div class="home-main-temp">
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import logo from "@/components/Logo.vue";
import promote from "@/views/promote";
import { mapState } from "vuex";
let get_region_devide = function (propertyname) {
  let url =
    "http://47.99.124.245:8082/getRegion?propertyname=" +
    this.current_property.area;
  this.axios({
    method: "get",
    url: url,
  })
    .then((res) => {
      let data = res.data.data;
      let layer_first = new Map();
      for (let i of data) {
        if (layer_first.has(i.region1)) {
          let layer_sec = layer_first.get(i.region1);
          if (i.region2 != "" && i.region2 != "null") {
            if (layer_sec.has(i.region2)) {
              if (i.region3 != "" && i.region3 != "null") {
                let layer_third = layer_sec.get(i.region2);
                layer_third.push(i.region3);
              }
            } else {
              layer_sec.set(i.region2, []);
              if (i.region3 != "" && i.region3 != "null") {
                let layer_third = layer_sec.get(i.region2);
                layer_third.push(i.region3);
              }
            }
          }
        } else {
          layer_first.set(i.region1, new Map());
          if (i.region2 != "" && i.region2 != "null") {
            let layer_sec = layer_first.get(i.region1);
            layer_sec.set(i.region2, []);
            if (i.region3 != "" && i.region3 != "null") {
              let layer_third = layer_sec.get(i.region2);
              layer_third.push(i.region3);
            }
          }
        }
      }

      if (data) {
        this.data = [
          {
            id: "a",
            label: "车位规划",
            value: "车位规划",
            showInput: false,
            children: [],
          },
        ];
      } else {
        this.data = [
          {
            id: "a",
            label: "车位规划",
            value: "车位规划",
            showInput: false,
            children: [],
          },
        ];
      }

      for (let i of layer_first) {
        let obj = {
          id: id++,
          label: i[0],
          value: i[0],
          showInput: false,
          children: [],
        };
        //已经见底了
        if (i[1].size == 0) {
          if (obj.children.length == 0) {
            this.$delete(obj, "children");
          }
          this.data[0].children.push(obj);
        } else {
          for (let j of i[1]) {
            let subobj = {
              id: id++,
              label: j[0],
              value: j[0],
              showInput: false,
              children: j[1],
            };
            if (subobj.children.length == 0) {
              this.$delete(subobj, "children");
            }
            obj.children.push(subobj);
          }

          if (obj.children.length == 0) {
            this.$delete(obj, "children");
          }
          this.data[0].children.push(obj);
        }
      }
      console.log("1243254g2uriwsegt9f");
      console.log("rangen_devide:", this.data);
    })
    .catch((err) => {});
};
export default {
  components: {
    logo,
    promote,
  },
  computed: {
    ...mapState(["current_property"]),
  },
  watch: {
    local_current_property_area(newvalue, oldvalue) {
      let target = this.propertys.find((x) => x.area == newvalue);
      this.local_current_property = target;
      this.$store.commit("setCurrentPropertyIndex", target.id);
      this.$store.commit("setCurrentProperty", target);
      get_region_devide.bind(this)(newvalue);
    },
  },
  created() {
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload", () => {
      //要保存到本地的数据
      let obj = JSON.stringify(this.$store.state);
      localStorage.setItem("store", obj);
    });
  },
  mounted() {
    let store = JSON.parse(localStorage.getItem("store"));
    if (store) {
      this.$store.replaceState(Object.assign({}, this.$store.state, store));
      localStorage.setItem("store", null);
      // console.log('hhh',localStorage.getItem('store'))
    }

    //整个房产数组
    this.propertys = this.$store.state.propertys;
    this.local_current_property = this.propertys[0];
    this.local_current_property_area = this.propertys[0].area;

    //初始化下车位规划信息
  },

  data() {
    return {
      data: [
        {
          id: "a",
          label: "车位规划",
          value: "车位规划",
          showInput: false,
          children: [],
        },
      ], //暂时存储一下规划信息
      local_current_property_area: "",
      local_current_property: "",
      propertys: [],
      showQuitChangeBtn: false,
      showSilde: true,
      showChangePwd: false,
      pwdForm: {
        oldPwd: "",
        newPwd1: "",
        newPwd2: "",
      },
    };
  },
  methods: {
    select(index,indexPath){
      console.log(index)
    },
    aleart_change_current_property(val) {
      this.$message.error("该行为将影响所有视图");
    },
    quit() {
      this.$router.push({ name: "login" });
    },
    changeSlide() {
      this.showSilde = !this.showSilde;
    },
    changePwd() {
      this.showChangePwd = false;
    },
    handleOpen() {},
    handleClose() {},
    main() {
      console.log("@@");
    },
  },
};
</script>

<style scoped>
.el-header {
  position: fixed;
  height: 60px;
  z-index: 2;
  width: 100%;
}
.el-menu {
  width: 30%;
  height: 100vh;
  position: fixed;
}

.maincontent {
  margin-top: 60px;
}

.home {
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}
.home-content {
  display: flex;

  width: 100vw;
  height: 100%;
}
.home-content .nav-bar {
  min-height: calc(100vh - 70px);
  width: 10%;
  box-shadow: 5px 0px 5px rgba(217, 236, 255, 0.8);
}

.home-content .home-main {
  flex-grow: 1;
}

/*header设置*/
.el-header {
  background: linear-gradient(to right, rgb(63, 133, 237), rgb(87, 171, 255));
  height: 70px;
}
.el-header > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  margin-left: 1rem;
  height: 100%;
  /* flex:1; */
  transform: scale(0.9);
  width: max-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title span:first-child {
  color: white;
  font-size: 30px;
  font-weight: bold;
}
.title span:not(:first-child) {
  color: white;
  font-size: 15px;
}

/*头像*/

.el-main {
  position: relative;
  height: 100%;
}
.header-image {
  display: flex;
  margin-right: 1rem;
  margin-left: 1rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.header-image img {
  width: 100%;
  height: 100%;
}
.header-tail {
  display: flex;
  align-items: center;
}

.dropdown {
  border-radius: 0px 0px 5px 5px;
  background-color: white;
  position: absolute;
  right: 10px;
  top: 0px;
  width: 5rem;
  font-size: 0.9rem;
  box-shadow: 2px 2px rgba(217, 236, 255, 0.8);
}

.dropdown div:hover {
  color: rgb(63, 133, 237);
  background-color: rgba(87, 171, 255, 0.4);
}
.dropdown div {
  text-align: center;
  padding: 7px;
}

.el-main {
  overflow: visible;
  background-color: rgb(236, 245, 255);
  position: relative;
  padding: 0;
}
.el-main .el-button {
  z-index: 2;
  position: absolute;
  left: -20px;
  top: 50%;
  overflow: visible;
}
.home-main-temp {
  width: 100%;
  margin: auto;
  transform: scale(0.95);
  min-height: 100vh;
}

/* 修改密码 */

.changepwd-form {
  width: 70%;
  margin: auto;
}
.el-form-item {
  margin-top: 1rem;
}
.el-button-group {
  margin-top: 2rem;
  display: flex;
  justify-content: space-around;
}

.el-button-group .el-button {
  display: block;
  position: static;
  width: 30%;
}

/*主页面内容 */
.home-main-temp {
  height: 100%;
}

#update {
  margin-left: 5rem;
}
</style>